<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=nIXoBMzPniRqA15jrCosM4qxhKEYEqkK&services=&t=20200927172029"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0;padding:0;}
        #container{height:100%;width: 100%;}
        #option,#get,#point {
            width: 4em;
            height: 4em;
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: #eee;
            line-height: 4em;
            text-align: center;
            border: 1px solid #aaa;
            z-index: 900;
        }
        #get {
            left: 4.5em !important;
        }
        #point {
            left: 9em !important;
        }

        #point a:link, #point a:visited,#get a:link, #get a:visited,#option a:link, #option a:visited{
            color:#333;
            text-decoration: none;
            display: block;
            width: 100%;
            height: 100%;
            z-index: 901;
        }

        #form {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(255,255,255,0.5);
            z-index:902;
            box-sizing: border-box;
            padding: 2em;
            font-size: 1.4em;
            display: none;
        }
        #form input[type=text],#form input[type=number] {
            width: 100%;
            height: 1.6em;
            border: 1px solid #333;
            font-size: 0.6em;
        }
        #form textarea {
            width: 100%;
            font-size: 1em;
        }
        .w70 {
            width: 68% !important;
        }
        .dw {
            font-size: 1em;
        }
        .opb {
            width: 100%;
            height: 3em;
            margin-bottom: 1em;
            background-color: orange;
            color:white;
            border: 1px solid darkorange;
        }

        #notify {
            position: fixed;
            top: 0;
            left: 50%;
            margin-left:-25%;
            width: 50%;
            height: 3em;
            background-color: white;
            border: 1px solid gray;
            line-height: 3em;
            text-align: center;
            display: none;
            z-index:999;
        }
        .warning {
            background-color: orange !important;
            border: 1px solid darkorange !important;
            color: red !important;
        }
        .success {
            background-color: green !important;
            border: 1px solid darkgreen !important;
            color: white !important;
        }


    </style>
</head>
<body>

<div id="container"></div>

<div id="notify" class="">
消息提示
</div>

<div id="option">
    <a href="javascript:void(0)">操作</a>
</div>
<div id="get">
    <a href="javascript:void(0)">获取</a>
</div>
<div id="point">
    <a href="javascript:void(0)">定位</a>
</div>

<div id="form">
    <p>
        客户名称：<br>
        <input type="text" name="name">
    </p>
    <p>
        快搜码：<br>
        <input type="text" name="pyCode">
    </p>
    <p>
        地址：<br>
        <input type="text" name="address">
    </p>
    <p>
        定位：<br>
        <input type="text" class="w70" name="dw">
        <button class="dw" id="dw">获取</button>
    </p>
    <p>
        联系人：<br>
        <input type="text" name="contactName">
    </p>
    <p>
        联系人电话：<br>
        <input type="number" name="contactPhoneNumber">
    </p>
    <p>
        QQ：<br>
        <input type="number" name="qq">
    </p>
    <p>
        微信：<br>
        <input type="text" name="wx">
    </p>
    <p>
        备注：<br>
        <textarea rows="3" name="remark"></textarea>
    </p>
    <p>
        <button class="opb" id="save">提交</button>
        <br>
        <button class="opb" id="cancel">取消</button>
    </p>
</div>
<script>
    axios.defaults.baseURL = "http://api.tiaofu.vip/";
    axios.defaults.withCredentials = true;
</script>

<script>
    var map = new BMap.Map("container");
    map.centerAndZoom(new BMap.Point(114.043177,30.592869), 16);

    let optionBtn = document.querySelector("#option a");
    let cancelBtn = document.querySelector("#cancel");
    let saveBtn = document.querySelector("#save");
    let formEl  = document.querySelector("#form");
    let notifyEl = document.querySelector('#notify');
    let dwBtn   = document.querySelector('#dw');
    let getBtn   = document.querySelector('#get');
    let pointBtn   = document.querySelector('#point');

    window.onload = function() {

        axios.get('tool/collect/getPointList').then(res => {
            let data = res.data.rdata || [];
            for(let v of data) {
                let point = v.dw.split(',');
                map.addOverlay(new BMap.Label(v.name, {position:new BMap.Point(point[0], point[1])}));
            }
        });

       optionBtn.addEventListener('click', e => {
            formEl.style.display = 'block';
        });
       cancelBtn.addEventListener('click', e=>{
            formEl.style.display = 'none';
       });
        pointBtn.addEventListener('click', e=> {
            success('正在获取');
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r) {
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMap.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                } else {
                    map.centerAndZoom('武汉市蔡甸区', 18);
                }
            });
        });

       dwBtn.addEventListener('click', e=> {
           let geolocation = new BMap.Geolocation();
           geolocation.getCurrentPosition(function(r) {
               if(this.getStatus() == BMAP_STATUS_SUCCESS){
                   var mk = new BMap.Marker(r.point);
                   map.addOverlay(mk);
                   map.panTo(r.point);
                   let dw = r.point.lng+','+r.point.lat;
                   document.querySelector('#form input[name="dw"]').value = dw;
               }
           });
       });
        saveBtn.addEventListener('click', e=> {
            e.stopPropagation();
            let post = {
                customerName : document.querySelector('#form input[name="name"]').value,
                 pyCode : document.querySelector('#form input[name="pyCode"]').value,
                 address : document.querySelector('#form input[name="address"]').value,
                 dw : document.querySelector('#form input[name="dw"]').value,
                 contactName : document.querySelector('#form input[name="contactName"]').value,
                 contactPhoneNumber : document.querySelector('#form input[name="contactPhoneNumber"]').value,
                 qq : document.querySelector('#form input[name="qq"]').value,
                 wx : document.querySelector('#form input[name="wx"]').value,
                 remark : document.querySelector('#form textarea[name="remark"]').value,
            };
            if(post.customerName.length <= 0) {
                warning('请填写名称');
                return false;
            }
            if(post.address.length <= 0) {
                warning('请填写地址');
                return false;
            }
            if(post.dw.length <= 0) {
                warning('请获取定位');
                return false;
            }
            alert('正在提交，请勿重复提交');
            axios.post('/tool/collect/customer', post).then(res => {
                if(res.data.status == 1) {
                    success('成功鸟');
                    formEl.style.display = 'none';
                    setTimeout(() => {
                        window.location.reload();
                    }, 500);
                } else {
                    warning(res.data.msg);
                }

            });

        });
        getBtn.addEventListener('click', e=> {
            axios.get('tool/collect/getCustomerList').then(res => {
                if(res.data.status == 1) {
                    alert("现在存在的客户有：\n" + res.data.rdata.join("\n"));
                } else {
                    warning('获取失败');
                }
            });
        });
    };

    function warning(text) {
        notifyEl.classList.remove('success');
        notifyEl.classList.add('warning');
        notifyEl.innerHTML = text;
        _notifyShow();
        setTimeout(() => {
            _notifyHidden();
        }, 1500);
    }

    function success(text) {
        notifyEl.classList.remove('warning');
        notifyEl.classList.add('success');
        notifyEl.innerHTML = text;
        _notifyShow();
        setTimeout(() => {
        _notifyHidden();
        }, 1500);
    }



    function _notifyShow()
    {
        notifyEl.style.display = 'block';
    }

    function _notifyHidden()
    {
        notifyEl.style.display = 'none';
    }

</script>

</body>
</html>